<template>
  <div style="height:100%;width:100%">
    <el-row class="mainContent" >
      <el-row :gutter="50" v-loading="listLoading">
        <el-col :span="8">
          <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>基本信息</span>
            </div>
            <div>
              <el-form  label-width="70px" :model="form">
                <el-form-item label="用户ID">
                  <el-input v-model="form.id" :disabled="pingDis" ></el-input>
                </el-form-item>
                <el-form-item label="手机号" style="display: none">
                  <el-input v-model="form.dataInfo.mobile" :disabled="pingDis" ></el-input>
                </el-form-item>
                <el-form-item label="用户名">
                  <el-input v-model="form.dataInfo.nickname" :disabled="warningDis"  ></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                  <el-input v-model="form.dataInfo.realname" :disabled="warningDis" ></el-input>
                </el-form-item>
                <el-form-item label="身份证号">
                  <el-input v-model="form.dataInfo.certnu" :disabled="warningDis" ></el-input>
                </el-form-item>
                <el-form-item label="注册时间">
                  <el-input v-model="form.regTime" :disabled="warningDis" ></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </div>
        </el-col>
        <el-col :span="8"><div class="grid-content bg-purple-light">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>资金账号</span>
              <el-button v-if="$store.state.routes.routes.yhWater"
                size="mini"
                type="text" style="float:right"
                @click="$router.push({path:'userWaterDetail',query:{id:form.id,from:'userConfig',name:form.dataInfo.nickname,realname:form.dataInfo.realname,mobile:form.dataInfo.mobile}})">资金流水</el-button>
            </div>
            <div>
              <el-form  label-width="70px" :model="form">
                <el-form-item label="可用余额">
                  <el-input v-model="form.financeInfo.amountAvailable" :disabled="pingDis"></el-input>
                </el-form-item>
                <hr style="border-color: grey;opacity: 0.1;">
                <h4 style="font-weight:400">银行卡信息</h4>
                <div>
                  <el-carousel trigger="click" height="260px"  indicator-position="outside" >
                    <el-carousel-item  v-for="item in form.cards" v-if="form.cards.length>0" :key="item.id">
                      <el-form-item label="银行">
                        <el-input v-model="item.bankName" :disabled="warningDis"  ></el-input>
                      </el-form-item>
                      <el-form-item label="银行卡号">
                        <el-input v-model="item.no" :disabled="warningDis"></el-input>
                      </el-form-item>
                      <el-form-item label="户名">
                        <el-input v-model="item.name" :disabled="warningDis" ></el-input>
                      </el-form-item>
                      <el-form-item >
                        <template slot-scope="scope">

                        <el-button
                          size="mini"
                          type="danger"
                          @click="jiebangBank(item.id,10)" :disabled="item.state==10">禁用</el-button>
                        <el-button
                          size="mini"
                          type="primary"
                          @click="jiebangBank(item.id,11)" :disabled="item.state==11">启用</el-button>
                        </template>
                      </el-form-item>
                    </el-carousel-item>
                  </el-carousel>

                </div>

              </el-form>
            </div>
          </el-card>
        </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>子账号详情</span>
            </div>
            <div>
              <el-form  label-width="70px" :model="form">
                <el-carousel trigger="click" height="280px" indicator-position="outside" >
                  <el-carousel-item  v-for="(item,index) in form.financing" v-if="form.financing.length>0" :key="index">
                    <el-form-item label="子账号ID">
                      <el-input v-model="item.subId" :disabled="pingDis" ></el-input>
                    </el-form-item>
                    <!--<el-form-item label="登录密码">-->
                      <!--<el-input v-model="item.subPassword" :disabled="warningDis" ></el-input>-->
                    <!--</el-form-item>-->
                    <el-form-item label="总资产">
                      <el-input v-model="item.amount" :disabled="warningDis" ></el-input>
                    </el-form-item>
                    <el-form-item label="借款额">
                      <el-input v-model="item.amountApply" :disabled="warningDis" ></el-input>
                    </el-form-item>
                    <el-form-item label="状态" v-if="item.state == 13 || item.state == 14">
                      <el-button  :disabled="warningDis" v-if="item.state==13" type="success" style="float: right;">正在使用中</el-button>
                      <el-button  :disabled="warningDis" v-if="item.state==14" type="warning" style="float: right;">结算审核中</el-button>
                    </el-form-item>
                  </el-carousel-item>
                </el-carousel>

              </el-form>
            </div>
          </el-card>
        </div></el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        btnText:'编辑',
        form:{
          dataInfo:{},
          financeInfo:{},
          financing:[{subId:'123',subPassword:'123',amount:'leasin',amountApply:'leasin'}],
          cards:[{bankName:'123',no:'123',name:'leasin'},{bankName:'qwe',no:'123',name:'leasin'}]
        },
        warningDis:true,
        pingDis:true,
        listLoading:false
      }
    },
    created() {
      this.getUsers();
    },
    methods: {
      getUsers() {
        this.listLoading = true;
        var obj = {
          data:{
            userid:this.$route.query.id
          }
        };
        this.$http('sys/user/userMsgDetail.do',obj).then(resp => {
          if(resp.code==1){
            this.form = resp.data;
          }
          this.listLoading = false;
        });
      },
      jiebangBank(id,state){
        if(!this.$store.state.routes.routes.yhjbOperate){
          this.$message({
            message:'无权限',
            type:'error'
          })
          return
        }
        var str = '';
        state==10? str="禁用":str="启用"
        this.$confirm("确定"+str+"么?", "提示", {})
          .then(() => {
            this.$http('sys/bankcard/unbundling.do',{data:{userid:this.$route.query.id,id:id,state:state}}).then(resp => {
              if(resp.code==1){
                this.$message({
                  message:resp.msg,
                  type:'success'
                })
              }else{
                this.$message({
                  message:resp.msg,
                  type:'error'
                })
              }
              this.getUsers()
            });
          })
          .catch(() => {});
      }
    }
  };
</script>

<style scoped>
  .box-card {
    width:100%;
    float: left;
    height:500px
  }
  form {
    width: 85%;
    margin: 0 auto;
  }
  form .el-input{
    width:180px;
    float: right;
  }

</style>
